<template>
  <i-biz-row
    :class="[ns.b(), ns.m(modelData.codeName), classArr]"
    :layout="modelData.layout"
  >
    <template v-for="panelItem in modelData.panelItems" :key="panelItem.id">
        <i-biz-col :layoutPos="panelItem.layoutPos" :state="container.panelItems[panelItem.id].state">
          <i-biz-panel-detail-shell
            :modelData="panelItem"
            :container="container"
            :controls="controls"
          />
        </i-biz-col>
      </template>
  </i-biz-row>
</template>
<script lang="ts">
export default {
  options: {
    addGlobalClass: true,
    virtualHost: true,
    styleIsolation: "shared"
  }
}
</script>
<script setup lang="ts">
import { computed, PropType } from "vue";
import { IControl, IPanelContainer } from "@ibiz/model-core";
import { IViewLayoutPanelController, PanelItemController } from "@ibiz-template/runtime";
import { useNamespace } from "@/use";

// 定义组件接收的属性
const props = defineProps({
    modelData: {
      // IPanelTabPage 不能使用 IPanelTabPage模型 否则会类型报错
      type: Object as PropType<IPanelContainer>,
      required: true,
    },
  container: {
    type: Object as PropType<IViewLayoutPanelController>,
    required: true,
  },
  controls: {
    type: Array as PropType<
      {
        modelData: IControl;
        slotProps: IData;
      }[]
    >,
    default: () => [],
  },
  controller: {
    type: PanelItemController,
    required: true,
  },
});

// 获取命名空间和计算类名数组
const ns = useNamespace("panel-tab-page");
const classArr = computed(() => {
  const { id } = props.modelData;
  const result: Array<string | false> = [ns.b(), ns.m(id)];
  if (props.controller) {
    result.push(...props.controller.containerClass);
  }
  return result;
});
</script>
